<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html class="x-admin-sm">

<head>
<meta charset="UTF-8">
<title>欢迎页面-X-admin2.2</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet" href="<%=basePath%>css/font.css">
<link rel="stylesheet" href="<%=basePath%>css/xadmin.css">
<script type="text/javascript"
	src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="<%=basePath%>lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=basePath%>js/xadmin.js"></script>
</head>

<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">演示</a>
			<a> <cite>导航元素</cite></a>
		</span>
	</div>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body">
						<div class="layui-form layui-input-inline layui-show-xs-block">
							<select name="className" id="classesId">
								<option value="">班级名称</option>
							</select>
						</div>
						<div class="layui-input-inline layui-show-xs-block">
							<input class="layui-input" name="username" id="username"
								autocomplete="off" placeholder="请输入用户名">
						</div>
						<div class="layui-input-inline layui-show-xs-block">
							<button class="layui-btn">
								<i class="layui-icon">&#xe615;</i>
							</button>
						</div>
					</div>
					<!-- layui-table -->
					<div class="layui-card-body ">
						<table class="layui-table layui-form" id="demo" lay-filter="demo">
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<!-- table上工具条 -->
<script type="text/html" id="toolbarDemo">
        <div class = "layui-btn-container" > 
            <button class = "layui-btn layui-btn-danger" lay-event = "delAll" > 批量删除 </button>
			<button class = "layui-btn" lay-event = "add" > <i class="layui-icon"></i>添加</button>
			<button class = "layui-btn" lay-event = "edit" > <i class="layui-icon"></i>修改</button>
        </div > 
</script>
<!-- 行操作按钮 -->
<script type="text/html" id="test-table-toolbar-barDemo">
              <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
              <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
<script>
	layui.use([ 'laydate', 'form', 'table' ], function() {
		var laydate = layui.laydate;
		var form = layui.form;
		var table = layui.table;

		// 监听全选
		form.on('checkbox(checkall)', function(data) {
			if (data.elem.checked) {
				$('tbody input').prop('checked', true);
			} else {
				$('tbody input').prop('checked', false);
			}
			form.render('checkbox');
		});

		//执行一个laydate实例
		laydate.render({
			elem : '#start' //指定元素
		});

		//执行一个laydate实例
		laydate.render({
			elem : '#end' //指定元素
		});
		//执行渲染
		var tableIns = table.render({
			url : '../doStudent?opr=list_ajax',
			elem : '#demo', //指定原始表格元素选择器（推荐id选择器）
			cols : [ [ //标题栏
			{
				checkbox : true
			}, {
				field : 'id',
				title : 'ID',
				width : 80
			}, {
				field : 'classesName',
				title : '班级',
				width : 190
			}, {
				field : 'stuName',
				title : '姓名',
				width : 190
			}, {
				field : 'stuGender',
				title : '性别',
				width : 190
			}, {
				field : 'stuAge',
				title : '年龄',
				width : 200
			}, {
				field : 'stuBirthDay',
				title : '出生日期',
				width : 360
			}, {
				width : 215,
				align : 'center',
				fixed : 'right',
				toolbar : '#test-table-toolbar-barDemo'//行操作按钮
			} ] ],
			parseData : function(res) { //res 即为原始返回的数据
				return {
					"code" : res.code, //解析接口状态
					"msg" : res.msg, //解析提示文本
					"count" : res.data.totalRow, //解析数据长度
					"data" : res.data.data//解析数据列表
				};
			},
			page : true,//启用分页插件
			request : {
				pageName : 'pageIndex',//页码的参数名称，默认：page
				limitName : 'pageSize'//每页数据量的参数名，默认：limit
			},
			toolbar : '#toolbarDemo'//工具栏
		});

		// 搜索按钮重载table
		$('.layui-input-inline .layui-btn').on('click', function() {
			tableIns.reload({
				where : {
					stuName : $("#username").val().trim(),
					className : $("#classesId").val()
				}

			})
		});
		
		//头工具栏事件
		table.on('toolbar(demo)', function(obj) {
			var checkStatus = table.checkStatus(obj.config.id);
			var ids = [];//选中id数组
			switch (obj.event) {
			case 'delAll':
				var data = checkStatus.data;
				$(data).each(function() {
					ids.push(this.id);
				});
				if (ids.length == 0) {
					layer.msg("未选中任何数据", {
						icon : 2
					});
				} else {
					layer.confirm('确认要删除吗？'+ids.toString(), function(index) {
						//捉到所有被选中的，发异步进行删除
						var url = '../doStudent?opr=delAll';
						$.post(url, {
							"ids" : ids.toString()
						}, function(data) {
							if (data.code == 0) {
								layer.msg(data.msg, {
									icon : 1
								});
								$(".layui-form-checked").not('.header')
										.parents('tr').remove();
							} else {
								layer.msg(data.msg);
							}
						}, 'json');
					});
				}
				break;
			case 'add':
				xadmin.open('添加用户', '../doStudent?opr=editView', 800, 600);
				break;
			case 'edit':
				var data = checkStatus.data;
				$(data).each(function() {
					ids.push(this.id);
				});
				if (ids.length == 0) {
					layer.msg("未选中任何数据", {
						icon : 2
					});
				} else {
					xadmin.open('编辑用户', '../doStudent?opr=editView&id=' + ids[0],
							800, 600);
				}
				break;
			}
			;
		});
		
		//监听table行工具事件
	    table.on('tool(demo)', function(obj){
	      var data = obj.data;
	      if(obj.event === 'del'){
	        layer.confirm('真的删除行么', function(index){
	          obj.del();
	          layer.close(index);
	        });
	      } else if(obj.event === 'edit'){
	        layer.prompt({
	          formType: 2
	          ,value: data.email
	        }, function(value, index){
	          obj.update({
	            email: value
	          });
	          layer.close(index);
	        });
	      }
	    });
		
	});

	//加载班级信息，填充下拉框option
	$.post('../doStudent?opr=cla_list_ajax', '', function(result) {
		$(result.data).each(
				function() {
					$("#classesId").append(
							"<option value='"+this.id+"'>" + this.classesName + "</option>");
				});
	}, 'json')
</script>

</html>